<template>
	<view class="container" :style="{paddingTop: statusBarHeight + 'px', background: 'linear-gradient(to bottom, #FF2F3A 0%, #FE4650 '+ (statusBarHeight + 44)+'px ,#F8F8F8  672rpx ,  #F8F8F8 100%)'}">
		<view style="position: fixed; top: 0; left: 0; width: 100vw; background: linear-gradient(to bottom, #FF2F3A 0% ,  #FE4650 100%);;z-index: 10;" :style="{paddingTop: statusBarHeight + 44 + 'px'}">
			
		</view>
		<uni-nav-bar :title="navigationBarTitleText[orderInfo.state]" :border="false" left-icon="left"  background-color="transparent" fixed color="#fff" class="nav_bar" @clickLeft="back" ></uni-nav-bar>
		<view class="title">
			<view class="icon">
				<image src="/static/icon_time.png" mode="widthFix" class="img" style="width: 40rpx;"></image>
				<view class="text">
					{{stateText[orderInfo.state]}}
				</view>
			</view>
			<view class="time" v-if="orderInfo.state == '2'">
				预计{{}}送达
			</view>
		</view>
		
		<view class="card to_pay"  v-if="orderInfo.state == '1'">
			<view class="left">
				<view class="pay_amount">
					需付款：¥{{goodsInfo.price}}
				</view>
				<view class="time">
					剩余时间：<text style="color: #FE332C;">{{wait_time}}</text>
				</view>
			</view>
			<view class="right">
				<button class="btn" @click="getPay">去支付</button>
			</view>
		</view>
		<view class="card to_delivery" v-if="orderInfo.state != '1'">
			<view class="left">
				<view class="pay_amount">
					{{orderInfo.express_name}}:{{logistics.status}}
				</view>
				<view class="time">
					{{logistics.context}}
				</view>
			</view>
			<view class="right">
				<image src="/static/right.png" style="width: 20rpx;" mode="widthFix"></image>
			</view>
		</view>
		
		<!-- 收货地址 -->
		<view class="card address_info" v-if="orderInfo.state != '1'">
			<view class="card_top">
				<view class="card_title">
					{{address.name}}
				</view>
				<view class="phone">
					{{address.mobile}}
				</view>
			</view>
			<view class="center">
				<!-- {{address.formatted_address}} -->{{address.address}}
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="card goods_info">
			<view class="card_top">
				<view class="card_title">
					商品信息
				</view>
			</view>
			<view class="center">
				<view class="goods_img">
					<image :src="goodsInfo.image" mode="aspectFit" class="img"></image>
				</view>
				<view class="goods_info_main">
					<view class="goods_info_name text-ellipsis">
						{{goodsInfo.title}}
					</view>
					<view class="goods_info_number">
						x{{goodsInfo.number}}
					</view>
					<view class="goods_info_price">¥{{goodsInfo.price}}</view>
				</view>
			</view>
			<view class="goods_info_bottom">
				<view class="amount"> 共{{goodsInfo.number}}件商品 </view>
				<view class="paid">
					<text style="margin-right: 4rpx;">实付额</text><text style="color: #FA2C1E;">¥{{goodsInfo.price}}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="card other_info">
			<view class="card_top">
				<view class="card_title">
					订单信息
				</view>
			</view>
			<view class="card_content">
				<view class="cell">
					<view class="label"> 订单编号 </view>
					<view class="value"> {{orderInfo.order_no}} </view>
				</view>
				<view class="cell">
					<view class="label"> 下单时间 </view>
					<view class="value"> {{orderInfo.createtime_text}} </view>
				</view>
				<view class="cell">
					<view class="label"> 配送方式 </view>
					<view class="value"> {{orderInfo.is_self_get}} </view>
				</view>
				<view class="cell">
					<view class="label"> 快递单号 </view>
					<view class="value"> {{orderInfo.express_no}} </view>
				</view>
				<view class="cell remark">
					<view class="label"> 备注 </view>
					<view class="value">
						{{orderInfo.remarks}}
					</view>
				</view>
			</view>
		</view>
		<!-- 支付信息 -->
		<view class="card pay_info"  v-if="orderInfo.state != '1'">
			<view class="card_content">
				<view class="cell">
					<view class="label"> 商品总额 </view>
					<view class="value"> {{pay.order_price}} </view>
				</view>
				<view class="cell">
					<view class="label"> 运费 </view>
					<view class="value"> + ￥{{pay.freight_price}} </view>
				</view>
				<view class="cell">
					<view class="label"> 优惠 </view>
					<view class="value"> - ￥{{pay.discount_price}} </view>
				</view>
				<view class="cell">
					<view class="label"> 合计 </view>
					<view class="value"> ¥{{pay.actual_payment}} </view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<button type="default" class="btn" v-if="orderInfo.state == 4" @click="applyForAfterSalesService">申请售后</button>
			<button type="default" class="btn" v-if="orderInfo.state == 3" @click="confirmOrder">确认收货</button>
			<button type="default" class="btn" v-if="orderInfo.state == 2" @click="applyForAccountTransfer">申请转户</button>
			<button type="default" class="btn" @click="getPay" v-if="orderInfo.state == 1">立即支付</button>
			<button type="default" class="btn btn_concel" @click="cancelOrder" v-if="orderInfo.state == 1">取消订单</button>
		</view>
	</view>
</template>

<script>
	import {getOrderInfo,payment,cancelOrder,confirmOrder} from '../../../api/api.js'
	export default {
		data() {
			return {
				statusBarHeight:'',
				id:'',
				stateText:{
					'1':'等待付款',
					'2':'商品出库',
					'3':'等待收货',
					'4':'订单已完成',
				},
				navigationBarTitleText:{
					'1':'订单详情',
					'2':'待发货',
					'3':'待收货',
					'4':'已完成',
				},
				 //订单全部信息
				orderInfo:{} ,
				//收货地址信息
				address:{}, 
				// 商品信息
				goodsInfo:{}, 
				//门店信息
				shop:{},
				//支付信息
				pay:{},
				//配送信息
				logistics:{},
				timerId:'',
				wait_time:''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.orderInfo.state = options.state
			this.GetStatusBarHeight();
			this.getOrderInfo()
		},
		methods:{
			//获取状态栏的高度
			GetStatusBarHeight() {
			    let that = this;
			       wx.getSystemInfo({
			        success: function (res) {
			            that.statusBarHeight = res.statusBarHeight;
			        },
			    });
			},
			getOrderInfo(){
				getOrderInfo({id:this.id}).then(res=>{
					this.orderInfo = res.data.data
					let {pay,address,shop,goods,logistics,createtime_text} = res.data.data
					this.pay = pay || {}
					this.address = address || {}
					this.shop = shop || {}
					this.logistics = logistics || {}
					this.goodsInfo = goods && goods.length > 0 ? goods[0] : {}
					if(createtime_text){
						let that = this
						that.updateWaitTime(createtime_text)
						this.timerId = setInterval(function(){
							that.updateWaitTime(createtime_text)
						} ,1000)
					}
				})
			},
			updateWaitTime(createtime_text){
				let endDate = Date.parse(new Date(createtime_text))  + 30 * 60 * 1000
				let cur = Date.parse(new Date())
				if(endDate < cur){
					this.wait_time = '00:00:00'
					clearInterval(this.timerId)
				}else {
					let hour = Math.floor((endDate - cur) / (60 * 60 * 1000))
					hour = hour > 9 ? ('' + hour) : ('0' + hour)
					let minute = Math.floor(((endDate - cur) % (60 * 60 * 1000)) / (60 * 1000))
					minute = minute > 9 ? ('' + minute) : ('0' + minute)
					let second = Math.floor((endDate - cur) / 1000) % 60
					second = second > 9 ? ('' + second) : ('0' + second)
					this.wait_time = `${hour}:${minute}:${second}`
				}
			},
			back(){
				uni.navigateBack()
			},
			// 取消订单
			cancelOrder(){
				let token = uni.getStorageSync("token")
				cancelOrder({id:this.orderInfo.id,token}).then(res=>{
					console.log(res)
					this.getOrderInfo()
				})
			},
			// 去支付
			getPay(){
				uni.navigateTo({url:'/pages/shop/confirmOrder/confirmOrder?id=' + this.orderInfo.id+'&type=repay'})
			},
			//申请转户
			applyForAccountTransfer(){
				uni.showToast({
					icon: 'none',
					title: '开发中',
					duration: 2000
				});
			},
			//确认收货
			confirmOrder(){
				let token = uni.getStorageSync("token")
				confirmOrder({id:this.orderInfo.id,token}).then(res=>{
					console.log(res)
					this.getOrderInfo()
				})
			},
			// 申请售后
			applyForAfterSalesService(){
				uni.showToast({
					icon: 'none',
					title: '开发中',
					duration: 2000
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #FF2F3A 0% ,#F8F8F8  672rpx ,  #F8F8F8 100%);
	// background: linear-gradient(to bottom, #fd393f 0% , #fd393f 200rpx ,#F8F8F8  201rpx ,  #F8F8F8 100%);
	padding: 0 24rpx;
	padding-bottom: calc(108rpx + 24rpx + env(safe-area-inset-bottom));
	// padding-top: var(--status-bar-height);
}
.title {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// background: linear-gradient(to bottom, #FF2F3A 0% ,  #FE4650 100%);
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	padding-left: 20rpx;
	.icon {
		display: flex;
		align-items: center;
		.text {
			margin-left: 10rpx;
		}
	}
	.time {
		font-size: 24rpx;
		font-weight: 400;
	}
}

.card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx 30rpx;
	margin-top: 24rpx;
	.card_top {
		height: 82rpx;
		padding-bottom: 20rpx;
		margin-bottom: 10rpx;
		border-bottom: 2rpx solid #E7E7E7;
		display: flex;
		align-items: center;
		.card_title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #222222;
		}
		
	}
	.card_content {
		.cell {
			display: flex;
			// align-items: center;
			font-size: 26rpx;
			line-height: 36rpx;
			padding: 10rpx 0;
			.label {
				flex: 1;
				color: #333333;
			}
			.value {
				flex: 2;
				text-align: right;
				color: #222222;
			}
		}
	}
}

.to_pay, .to_delivery {
	// margin-top: -42rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left {
		.pay_amount{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
		}
		.time {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			margin-top: 8rpx;
		}
	}
	.right {
		.btn {
			width: 72px;
			height: 27px;
			background: linear-gradient(270deg, #FE2E27 0%, #FE877F 100%);
			border-radius: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
// 地址信息
.address_info {
	.card_top {
		.phone {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin-left: 30rpx;
		}
	}
	.center {
		margin-top: 22rpx;
	}
}
// 商品信息
.goods_info {
	font-family: PingFangSC-Regular, PingFang SC;
	.center {
		margin-top: 32rpx;
		height: 150rpx;
		width: 100%;
		display: flex;
		.goods_img {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			.img {
				width: 150rpx;
				height: 100%;
			}
		}
		.goods_info_main {
			width: 100%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.goods_info_number {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
			.goods_info_price {
				font-size: 20rpx;
				font-weight: 400;
				color: #FA2C1E;
				line-height: 28rpx;
			}
		}
	}
	.goods_info_bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		.amount{
			color: #999999;
			line-height: 24rpx;
			margin-right: 24rpx;
		}
		.paid {
			color: #222222;
			line-height: 28rpx;
		}
	}
}
// 其他信息
.other_info {
	.content {
		.cell {
			.remark {
				justify-content: start;
				.label {
					flex: none;
				}
				.value {
					flex: none;
				}
				
			}
			.value {
				.input {
					font-size: 26rpx;
				}
			}
		}
	}
	
}
// 支付信息
.pay_info {
	.card_content {
		.cell {
			.value {
				color: #FA2C1E;
			}
		}
	}
}
.bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: calc(108rpx + env(safe-area-inset-bottom));
	padding: 24rpx 30rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	background-color: #fff;
	font-family: PingFangSC-Regular, PingFang SC;
	.btn {
		font-size: 26rpx;
		float: right;
		width: 164rpx;
		height: 60rpx;
		background: linear-gradient(270deg, #FE2E27 0%, #FE877F 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
	}
	.btn_concel {
		border: 2rpx solid #D1D2D5;
		color: #999999;
		background: #fff;
	}
}
</style>
